<template>
    <div class="in-num-wrapper">
        <div class="img_container">
            <img :src="renderImg(store_logo)"/>
            <div class="store_name">{{store_name}}</div>
        </div>
        <div class="main">
            <div class="title">
                <span>{{store_name}}</span>
                <span>{{number}}</span>
            </div>
            <ul class="order-list">
                <li class="listItem">
                    <span>{{create_time}}</span>
                    <span>{{desk_cate_name}}</span>
                </li>
                <li class="listItem">
                    <span>还需等待</span>
                    <span>{{queue_count}}桌</span>
                </li>
                <li class="listItem">
                    <span>预计等待</span>
                    <span>{{wait_min}}</span>
                </li>
            </ul>
            <div class="order">
                <a :href="href()">提前点餐</a>
            </div>
            <user-center :store="store_id"></user-center>
        </div>
    </div>
</template>
<script>
    import axios from '../plugins/axios';
    import userCenter from '../components/common/center.vue'
    export default {
        async asyncData ({res, req, error}) {
            let userInfo = res.locals.userInfo;
            let token = res.locals.token;
            let queue_id = res.locals.queueId;
            let store_id = req.query.store;
            let response = {};
            try {
                response = await axios.get('/api/h5/customer/queue/detail', {
                    params: {
                        queue_id,
                        token
                    }
                });
                response = response.data || {};
            } catch (e) {
                error({});
            }
            return {
                userInfo: userInfo,
                token: token,
                ...response.data,
                store_id
            }
        },
        head () {
            return {
                title: '排号中'
            }
        },
        components: {
            userCenter
        },
        methods: {
            href(){
                return `./menu?store=${this.store_id}&num=${this.dining_count}&queueId=${this.queue_id}&pre=y`
            }
        }
    }
</script>
<style lang="less" scoped>
    .in-num-wrapper {
        min-height: 100vh;
        .img_container {
            height: 186px;
            background: #eee;
            display: flex;
            justify-content: center;
            position: relative;
            img {
                width: 100%;
            }
            .store_name {
                font-size: 24px;
                position: absolute;
                left: 20px;
                bottom: 12px;
                color: #ffffff;
            }
        }
        .main {
            flex: 1;
            padding: 48px 20px 20px 20px;
            .title {
                font-size: 18px;
                color: #000000;
                display: flex;
                justify-content: space-between;
                border-top: 1px solid #EDEDED;
                border-bottom: 1px solid #EDEDED;
                height: 60px;
                line-height: 60px;
            }
            .order-list {
                .listItem {
                    height: 40px;
                    line-height: 40px;
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                }
                .listItem + .listItem {
                    border-top: 1px solid #EDEDED;
                }
            }
            .order {
                background: #000000;
                box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
                border-radius: 21px;
                color: #ffffff;
                height: 44px;
                line-height: 44px;
                font-size: 18px;
                width: 100%;
                margin-top: 36px;
                text-align: center;
                a {
                    color: #ffffff;
                    text-decoration: none;
                    width: 100%;
                    display: inline-block;
                }

            }
            .list {
                margin-top: 73px;
                width: 100%;
                .item {
                    height: 60px;
                    font-size: 18px;
                    color: #000000;
                    line-height: 60px;
                    border-top: 1px solid #EDEDED;
                    display: flex;
                    justify-content: space-between;
                    a {
                        color: #000000;
                        text-decoration: none;
                        width: 100%;
                        display: inline-block;
                    }
                }
                .item + .item {
                    border-bottom: 1px solid #EDEDED;
                }
            }
            .item_right {
                width: 22px;
                height: 100%;
                display: inline-block;
                margin-right: 20px;
            }
            .item_left {
                padding-left: 30px;
                height: 100%;
                display: inline-block;
                margin-right: 20px;
                margin-left: 10px;
            }
        }
    }

</style>